<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消费者体验流程图</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">      
    <link href="css/style.css" rel="stylesheet">
</head>
<style>
	.table{empty-cells:show;border-collapse:collapse;border-spacing:0;float: left;}
	.tablecontent{
		position: absolute;
		right:10%;
		display:none; vertical-align: top; width:120px;
		
	}
	#myPaletteDiv{
		height: 560px;
		background:#263238;
	}
	#myDiagramDiv{
		width:100%;height:1150px;
	}
	.save-btn{
		width: 100%;
		display: block;
		line-height: 50px;
		background: #4e97d9;
		text-align: center;
		color: #fff;
		cursor: pointer;
	}
</style>
	<body style="background: #fff;" ms-controller="tuzhi" onload="">
		  
		<div class="tuzhi-content">
			<img src="img/shapanimg_01.jpg"/>
			<div class="table-content clearfix">
				<img src="img/shapanline_03.jpg"/>
				<div class="thinkcss">
				<table width="100%" class="table-content" data-resizable-columns-id="demo-table">
					<thead>
						<tr class="tr-first">
							<th width="50%" colspan="2">user 消费者</th>
							<th width="50%" colspan="2"> service provider提供服务方</th>
						</tr>
						<tr class="tr-second">
							<th>消费者需求</br>NEED</th>
							<th>消费者使用流程</br>ACTIVITY</th>
							<th>接触点</br>TOUCH POINT</th>
							<th>回答</br>ANSWERS</th>
						</tr>
					</thead>
				</table>
					<span class="tablecontent">
				      <div id="myPaletteDiv" ></div>
				       <p ms-on-click="@post" class="save-btn">保存</p>
				    </span>
				 
					<div id="sample">
					  <div style="width:100%; white-space:nowrap;">

						
					    <span style="display: inline-block; vertical-align: top; width:100%">
					      <div id="myDiagramDiv"></div>
					    </span>
					  </div>
					</div>			
				</div>			
			</div>
		</div>
	</body>
	<script src="../js/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/avalon.js/2.2.7/avalon.min.js"></script>	
	<script src="../js/all.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/go.js" type="text/javascript" charset="utf-8"></script>
	<script id="code">
	  function init() {
	    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
	    var $ = go.GraphObject.make;  // for conciseness in defining templates
	
	    myDiagram =
	      $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
	        {
	           "toolManager.mouseWheelBehavior":go.ToolManager.WheelNone,//鼠标滚轮事件禁止
	          allowDrop: true,  // must be true to accept drops from the Palette
	          "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
	          "LinkRelinked": showLinkLabel,
	          'initialPosition': new go.Point(0,0),
	          "animationManager.duration": 800, // slightly longer than default (600ms) animation
	          "undoManager.isEnabled": true  // enable undo & redo
	        });
	
	    // when the document is modified, add a "*" to the title and enable the "Save" button
	    myDiagram.addDiagramListener("Modified", function(e) {
	      var button = document.getElementById("SaveButton");
	      if (button) button.disabled = !myDiagram.isModified;
	      var idx = document.title.indexOf("*");
	      if (myDiagram.isModified) {
	        if (idx < 0) document.title += "*";
	      } else {
	        if (idx >= 0) document.title = document.title.substr(0, idx);
	      }
	    });
	
	    // helper definitions for node templates
	
	    function nodeStyle() {
	      return [
	        // The Node.location comes from the "loc" property of the node data,
	        // converted by the Point.parse static method.
	        // If the Node.location is changed, it updates the "loc" property of the node data,
	        // converting back using the Point.stringify static method.
	        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
	        {
	          // the Node.location is at the center of each node
	          locationSpot: go.Spot.Center,
	          //isShadowed: true,
	          //shadowColor: "#888",
	          // handle mouse enter/leave events to show/hide the ports
	          mouseEnter: function (e, obj) { showPorts(obj.part, true); },
	          mouseLeave: function (e, obj) { showPorts(obj.part, false); }
	        }
	      ];
	    }
	
	    function makePort(name, spot, output, input) {
	      return $(go.Shape, "Circle",
	               {
	                  fill: "transparent",
	                  stroke: null,  // this is changed to "white" in the showPorts function
	                  desiredSize: new go.Size(8, 8),
	                  alignment: spot, alignmentFocus: spot,  // align the port on the main Shape
	                  portId: name,  // declare this object to be a "port"
	                  fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
	                  fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
	                  cursor: "pointer"  // show a different cursor to indicate potential link point
	               });
	    }
	
	    // define the Node templates for regular nodes
	
	    var lightText = 'whitesmoke';
	
	    myDiagram.nodeTemplateMap.add("",  // the default category
	      $(go.Node, "Spot", nodeStyle(),
	        // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
	        $(go.Panel, "Auto",
	          $(go.Shape, "Rectangle",
	            { fill: "#00A9C9", stroke: null },
	            new go.Binding("figure", "figure")),
	          $(go.TextBlock,
	            {
	              font: "bold 11pt Helvetica, Arial, sans-serif",
	              stroke: lightText,
	              margin: 8,
	              maxSize: new go.Size(160, NaN),
	              wrap: go.TextBlock.WrapFit,
	              editable: true
	            },
	            new go.Binding("text").makeTwoWay())
	        ),
	        // four named ports, one on each side:
	        makePort("T", go.Spot.Top, false, true),
	        makePort("L", go.Spot.Left, true, true),
	        makePort("R", go.Spot.Right, true, true),
	        makePort("B", go.Spot.Bottom, true, false)
	      ));
	
	    myDiagram.nodeTemplateMap.add("开始",
	      $(go.Node, "Spot", nodeStyle(),
	        $(go.Panel, "Auto",
	          $(go.Shape, "Circle",
	            { minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }),
	          $(go.TextBlock, "开始",
	            { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
	            new go.Binding("text"))
	        ),
	        // three named ports, one on each side except the top, all output only:
	        makePort("L", go.Spot.Left, true, false),
	        makePort("R", go.Spot.Right, true, false),
	        makePort("B", go.Spot.Bottom, true, false)
	      ));
	
	    myDiagram.nodeTemplateMap.add("结束",
	      $(go.Node, "Spot", nodeStyle(),
	        $(go.Panel, "Auto",
	          $(go.Shape, "Circle",
	            { minSize: new go.Size(40, 40), fill: "#DC3C00", stroke: null }),
	          $(go.TextBlock, "结束",
	            { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
	            new go.Binding("text"))
	        ),
	        // three named ports, one on each side except the bottom, all input only:
	        makePort("T", go.Spot.Top, false, true),
	        makePort("L", go.Spot.Left, false, true),
	        makePort("R", go.Spot.Right, false, true)
	      ));
	
	    myDiagram.nodeTemplateMap.add("标签",
	      $(go.Node, "Auto", nodeStyle(),
	        $(go.Shape, "File",
	          { fill: "#EFFAB4", stroke: null }),
	        $(go.TextBlock,
	          {
	            margin: 5,
	            maxSize: new go.Size(200, NaN),
	            wrap: go.TextBlock.WrapFit,
	            textAlign: "center",
	            editable: true,
	            font: "Arial",
	            stroke: '#454545'
	          },
	          new go.Binding("text").makeTwoWay())
	        // no ports, because no links are allowed to connect with a comment
	      ));
	
	
	    // replace the default Link template in the linkTemplateMap
	    myDiagram.linkTemplate =
	      $(go.Link,  // the whole link panel
	        {
	          routing: go.Link.AvoidsNodes,
	          curve: go.Link.JumpOver,
	          corner: 5, toShortLength: 4,
	          relinkableFrom: true,
	          relinkableTo: true,
	          reshapable: true,
	          resegmentable: true,
	          // mouse-overs subtly highlight links:
	          mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
	          mouseLeave: function(e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; }
	        },
	        new go.Binding("points").makeTwoWay(),
	        $(go.Shape,  // the highlight shape, normally transparent
	          { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
	        $(go.Shape,  // the link path shape
	          { isPanelMain: true, stroke: "gray", strokeWidth: 2 }),
	        $(go.Shape,  // the arrowhead
	          { toArrow: "standard", stroke: null, fill: "gray"}),
	        $(go.Panel, "Auto",  // the link label, normally not visible
	          { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
	          new go.Binding("visible", "visible").makeTwoWay(),
	          $(go.Shape, "RoundedRectangle",  // the label shape
	            { fill: "#F8F8F8", stroke: null }),
	          $(go.TextBlock, "TO",  // the label
	            {
	              textAlign: "center",
	              font: "10pt helvetica, arial, sans-serif",
	              stroke: "#333333",
	              editable: true
	            },
	            new go.Binding("text").makeTwoWay())
	        )
	      );
	
	    // Make link labels visible if coming out of a "conditional" node.
	    // This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents.
	    function showLinkLabel(e) {
	      var label = e.subject.findObject("LABEL");
	      if (label !== null) label.visible = (e.subject.fromNode.data.figure === "Diamond");
	    }
	
	    // temporary links used by LinkingTool and RelinkingTool are also orthogonal:
	    myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
	    myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;
	
	    load();  // load an initial diagram from some JSON text加载原有流程
	
	    // initialize the Palette that is on the left side of the page
	    myPalette =
	      $(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
	        {
	          "animationManager.duration": 800, // slightly longer than default (600ms) animation
	          nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
	          model: new go.GraphLinksModel([  // specify the contents of the Palette
	            { category: "开始", text: "开始" },
	            { text: "节点" },
	            { text: "条件", figure: "Diamond" },
	            { category: "结束", text: "结束" },
	            { category: "标签", text: "标签" }
	          ])
	        });
	
	    // The following code overrides GoJS focus to stop the browser from scrolling
	    // the page when either the Diagram or Palette are clicked or dragged onto.
	
	    function customFocus() {
	      var x = window.scrollX || window.pageXOffset;
	      var y = window.scrollY || window.pageYOffset;
	      go.Diagram.prototype.doFocus.call(this);
	      window.scrollTo(x, y);
	    }
	
	    myDiagram.doFocus = customFocus;
	    myPalette.doFocus = customFocus;
	
	
	  } // end init
	
	  // Make all ports on a node visible when the mouse is over the node
	  function showPorts(node, show) {
	    var diagram = node.diagram;
	    if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
	    node.ports.each(function(port) {
	        port.stroke = (show ? "white" : null);
	      });
	  }
	
	
	 // Show the diagram's model in JSON format that the user may edit
	  function save() {
	    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
	  }
	  function load() {
	    myDiagram.model = go.Model.fromJson(model.data);
	  }
	
	  // add an SVG rendering of the diagram at the end of this page

	</script>	
	<script>
		var model =avalon.define({
			$id:"tuzhi",
			data:{},
			list:{},
			use:ComFunJS.getQueryString('use'),
			teamId:ComFunJS.getQueryString('teamId'),			
			getlocation:function(){
				if(localStorage.getItem('tuzhione')!=''){
					model.data=JSON.parse(localStorage.getItem('tuzhione'))	
				}
				load()
			},
			post:function(){
				localStorage.setItem('tuzhione',JSON.stringify(model.data))
			},	
            initWebSocket(teamId){ //初始化weosocket
                //ws地址
                const wsuri = ComFunJS.WEBSORCTAPIURL("/webSocketServer/"+model.teamId) ;
                model.websock = new WebSocket(wsuri);
                model.websock.onmessage = model.websocketonmessage;
                model.websock.onclose = model.websocketclose;
            },
            websocketonmessage(e){ //数据接收
            	var redata =JSON.parse(e.data);
				if(model.data!=redata.teamdraw.content){
					model.data=redata.teamdraw.content;
					load()
				}			
            },
            websocketclose(e){  //关闭
                console.log("connection closed (" + e.code + ")");
            }				
		})
		avalon.ready(function(){
			init()
			if(model.use==0){
				model.getlocation()
				model.initWebSocket()
				model.websocketonmessage()
			}
		})

	</script>
</html>
